<!DOCTYPE html>
<html>
<head>
  <style>
    #vis.vega-embed {
      width: 100%;
      display: flex;
    }

    #vis.vega-embed details,
    #vis.vega-embed details summary {
      position: relative;
    }
  </style>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-lite@5.8.0"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
    (function(vegaEmbed) {
      var spec = {"config": {"view": {"continuousWidth": 300, "continuousHeight": 300, "strokeWidth": 0}, "axis": {"grid": false}}, "hconcat": [{"mark": {"type": "bar", "color": "#81c01e"}, "encoding": {"tooltip": [{"field": "product_rating", "type": "quantitative"}, {"field": "number_of_reviews", "type": "quantitative"}], "x": {"bin": {"maxbins": 5}, "field": "product_rating", "title": "Product Rating", "type": "quantitative"}, "y": {"field": "number_of_reviews", "title": "Number of Reviews", "type": "quantitative"}}, "title": "Product Ratings vs. Number of Reviews"}, {"mark": {"type": "circle", "color": "#81c01e", "size": 100}, "encoding": {"tooltip": [{"field": "product_rating", "type": "quantitative"}, {"field": "returns", "type": "quantitative"}], "x": {"field": "product_rating", "title": "Product Rating", "type": "quantitative"}, "y": {"field": "percentage_of_returns", "scale": {"domain": [0, 100]}, "title": "Percentage of returns", "type": "quantitative"}}, "title": "Product Ratings vs. Percentage of Returns"}], "data": {"name": "data-7b21f5d59f5a52d849b1f09f3f0a1ae0"}, "$schema": "https://vega.github.io/schema/vega-lite/v5.8.0.json", "datasets": {"data-7b21f5d59f5a52d849b1f09f3f0a1ae0": [{"product_id": "P1001", "number_of_orders": 30, "product_rating": 4.5, "product_category": "Electronics", "returns": 0, "number_of_reviews": 3, "percentage_of_returns": 0.0}, {"product_id": "P1002", "number_of_orders": 12, "product_rating": 3.2, "product_category": "Home & Kitchen", "returns": 6, "number_of_reviews": 6, "percentage_of_returns": 50.0}, {"product_id": "P1003", "number_of_orders": 55, "product_rating": 4.9, "product_category": "Apparel", "returns": 0, "number_of_reviews": 4, "percentage_of_returns": 0.0}, {"product_id": "P1004", "number_of_orders": 34, "product_rating": 2.5, "product_category": "Electronics", "returns": 29, "number_of_reviews": 32, "percentage_of_returns": 85.29411764705883}, {"product_id": "P1005", "number_of_orders": 28, "product_rating": 4.8, "product_category": "Home & Kitchen", "returns": 3, "number_of_reviews": 8, "percentage_of_returns": 10.714285714285714}, {"product_id": "P1006", "number_of_orders": 32, "product_rating": 3.8, "product_category": "Electronics", "returns": 2, "number_of_reviews": 7, "percentage_of_returns": 6.25}, {"product_id": "P1006", "number_of_orders": 24, "product_rating": 4.2, "product_category": "Electronics", "returns": 0, "number_of_reviews": 4, "percentage_of_returns": 0.0}, {"product_id": "P1006", "number_of_orders": 22, "product_rating": 2.1, "product_category": "Electronics", "returns": 18, "number_of_reviews": 20, "percentage_of_returns": 81.81818181818183}]}};
      var embedOpt = {"mode": "vega-lite"};

      function showError(el, error){
          el.innerHTML = ('<div style="color:red;">'
                          + '<p>JavaScript Error: ' + error.message + '</p>'
                          + "<p>This usually means there's a typo in your chart specification. "
                          + "See the javascript console for the full traceback.</p>"
                          + '</div>');
          throw error;
      }
      const el = document.getElementById('vis');
      vegaEmbed("#vis", spec, embedOpt)
        .catch(error => showError(el, error));
    })(vegaEmbed);

  </script>
</body>
</html>